<template>
  <div class="wrap">
    <div class="content">
      <div class="info">
        <div class="head">
          <div>
            <div class="name">服务商发起活动次数</div>
            <div class="count">{{ res.serviceNum }}次</div>
          </div>
          <div>
            <div class="name">门店预约成功次数</div>
            <div class="count">{{ res.storeNum }}次</div>
          </div>
          <div>
            <div class="name">成功举办次数</div>
            <div class="count">{{ res.successNum }}次</div>
          </div>
          <div>
            <div class="name">参加活动人数</div>
            <div class="count">{{ res.jionNum }}次</div>
          </div>
          <div>
            <div class="name">签到人数</div>
            <div class="count">{{ res.signNum }}人</div>
          </div>
        </div>
       <!--  <div class="tabs">
          <div>门店</div>
          <div class="tabac">服务商</div>
        </div> -->
        <div class="tabs-data">
          <el-tabs v-model="tabs" v-loading="loading" >
              <el-tab-pane  label="门店" name="store">
                  <el-table
                      :data="storeList"
                      border
                      style="width: 100%"
                      >
                      <el-table-column
                          prop="serviceName"
                          label="门店名称"
                          >
                      </el-table-column>
                      <el-table-column
                          prop="serviceNum"
                          label="活动次数"
                          >
                      </el-table-column>
                      <el-table-column
                          prop="storeNum"
                          label="预约成功次数"
                          >
                      </el-table-column>
                      <el-table-column
                          prop="successNum"
                          label="成功举办次数"
                          >
                      </el-table-column>
                      <el-table-column
                          prop="jionNum"
                          label="参与总人数"
                          >
                      </el-table-column>
                      <el-table-column
                          prop="signNum"
                          label="签到人数"
                          >
                      </el-table-column>
                  </el-table>
              </el-tab-pane>
              <el-tab-pane label="服务商" name="service">
                  <el-table
                      :data="serviceList"
                      border
                      style="width: 100%"
                      >
                      <el-table-column
                          prop="serviceName"
                          label="服务商名称"
                          >
                      </el-table-column>
                      <el-table-column
                          prop="serviceNum"
                          label="活动次数"
                          >
                      </el-table-column>
                      <el-table-column
                          prop="storeNum"
                          label="预约成功次数"
                          >
                      </el-table-column>
                      <el-table-column
                          prop="successNum"
                          label="成功举办次数"
                          >
                      </el-table-column>
                      <el-table-column
                          prop="jionNum"
                          label="参与总人数"
                          >
                      </el-table-column>
                      <el-table-column
                          prop="signNum"
                          label="签到人数"
                          >
                      </el-table-column>
                  </el-table>
              </el-tab-pane>
          </el-tabs>
         </div>
       <!--  <div class="table">
          <div class="thead">
            <div class="servername">服务商名称</div>
            <div class="account">活动次数</div>
            <div class="ysuccess">预约成功次数</div>
            <div class="successed">成功举办次数</div>
            <div class="cjpeople">参与总人数</div>
            <div class="qdpeople">签到人数</div>
          </div>
        </div> -->
      </div>
    </div>

    <el-pagination
      class="pages"
      background
      layout="prev, pager, next"
      :page-count="total"
      @current-change="changePage"
      >
    </el-pagination>

  </div>
</template>
<script>
import axios from 'axios'
import qs from 'qs'
export default {
  created () {
    let _this = this;

    // 获取统计数据
    axios.post (
      `${this.$store.state.url}/tActivity/selectActivityNum`
    ).then ( response => {
      let res = response.data;
      if ( res.code == 0 ) {
        _this.res = res.data;
      }
    });

    this.getStoreList();
  },
  data() {
    return {
        loading: false,
        total: 0,
        tabs: 'store',  // 标签页
      page: {
        page: 1,
        limit: 10
      },
      storeList: [],
      serviceList: [],
      res: {
        jionNum: 0,
        serviceNum: 0,
        signNum: 0,
        storeNum: 0,
        successNum: 0
      }
    };
  },
  methods: {
        //. 获取门店活动概况列表
    getStoreList() {
        this.loading = true;
        axios.post (
            `${this.$store.state.url}/tActivity/selectNumByStore`,
            qs.stringify(this.page)
        ).then ( response => {
            let res = response.data;
            this.storeList = res.data;
            this.total = Math.ceil ( res.count / 10 );
            this.loading = false;
        });
    },
    // 获取服务商活动概况列表
    getServiceList() {
        this.loading = true;
        axios.post (
            `${this.$store.state.url}/tActivity/selectNumByService`,
            qs.stringify(this.page)
        ).then ( response => {
            let res = response.data;
            this.serviceList = res.data;
            this.total = Math.ceil ( res.count / 10 );
            this.loading = false;
        });
    },
    // 切换分页
    changePage( argv ) {
      console.log(argv)
        this.page.page = argv;
        if ( this.tabs == 'store' ) {
            this.getStoreList();
        } else {
            this.getServiceList();
        }
    }
  },
  watch: {
    tabs( val ) {
        this.page.page = 1;
        if ( val == 'store' ) {
            this.getStoreList();
        } else {
            this.getServiceList();
        }
    }
  }
};
</script>
<style scoped>
.title {
  height: 33px;
  line-height: 33px;
  font-size: 24px;
  font-family: PingFangSC-Medium;
  font-weight: bold;
  padding-left: 7px;
}
.title img {
  width: 28px;
  height: 26px;
  float: left;
  padding-top: 5px;
  margin-right: 10px;
}
.content ul {
  float: left;
  background: #f6f6f6;
  width: 148px;
  height: 278px;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #000000;
}
.content ul li.first {
  margin-top: 31px;
}
.content ul li.active {
  background: #085dab;
  color: #fff;
}
.content ul li {
  margin: 35px 0px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  font-weight: bold;
}
.info {
  /* width: 1504px; */
  /* float: left; */
  /* height: 140px; */
  background: #f6f6f6;
  /* margin-left: -101px; */
  /* margin-top: -70px; */
}
.head {
  display: flex;
  /* width: 1504px; */
}
.head > div {
  flex: 1;
  border-left: 1px solid #fff;
  height: 140px;
}
.head :first-child {
  border-left: 0px solid #fff;
}
.name {
  font-size: 18px;
  color: #000000;
  height: 24px;
  text-align: center;
  margin-top: 23px;
  margin-bottom: 27px;
  font-weight: bold;
}
.count {
  height: 50px;
  font-size: 36px;
  color: #085dab;
  text-align: center;
  line-height: 50px;
}
.tabs {
  margin-top: 38px;
  border: 1px solid #dddddd;
  width: 398px;
  height: 67px;
  display: flex;
  font-size: 20px;
}
.tabs > div {
  flex: 1;
  font-size: 20px;
  height: 67px;
  line-height: 67px;
  text-align: center;
  font-weight: bold;
}
.tabs:first-child {
  border-right: 1px solid #ddd;
}
.tabs .tabac {
  background: #e0eefe;
}
.thead {
  background: #e0eefe;
  border: 1px solid #dddddd;
  width: 1488px;
  height: 67px;
  line-height: 67px;
}
.thead > div {
  float: left;
  height: 67px;
  border-right: 1px solid #ddd;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
}
.tbody {
  width: 1488px;
  display: inline-block;
  overflow: hidden;
  height: 160px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  margin-top: -2px;
}
.tbody > div {
  height: 158px;
  line-height: 160px;
  float: left;
  border-right: 1px solid #ddd;
  text-align: center;
  font-size: 18px;
  color: #4a4a4a;
}
.servername {
  /* width: 200px; */
  width: 16.66666666666667%;
}
.account {
  /* width: 249px; */
  width: 16.66666666666667%;
}
.ysuccess {
  /* width: 280px; */
  width: 16.66666666666667%;
}
.successed {
  /* width: 262px; */
  width: 16.66666666666667%;
}
.cjpeople {
  /* width: 270px; */
  width: 16.66666666666667%;
}
.qdpeople {
  /* width: 220px; */
  width: 16.66666666666667%;
}
.tabs-data{
  padding:10px;
  background-color:#fff;
}
.pages{
  position: fixed;
  z-index: 999;
  bottom: 0;
  padding:20px 0;
  width: 100%;
  text-align: center;
  margin-left:-152px;
}
</style>
